<!--  -->
<template>
  <div class="goods">
      <van-notice-bar
  left-icon="volume-o"
  text="大甩卖大甩卖10元两双大甩卖大甩卖10元两双大甩卖大甩卖10元两双大甩卖大甩卖10元两双大甩卖大甩卖10元两双大甩卖大甩卖10元两双"
/>
    <ul>
      <li @click="goToDetail(item.id)" v-for="item in goods" :key="item.id">
        <div class="divider"></div>
        <van-card
          :num="item.num"
          :price="item.price"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.thumb"
          origin-price="789.00"
          tag="甩卖"
        >
          <template #tags>
            <van-tag plain type="danger">保暖</van-tag>
            <van-tag class="tag-r"  type="danger">防水</van-tag>
          </template>
          <template #footer>
            <van-button type="info" size="mini">按钮</van-button>
            <van-button type="info" size="mini">按钮</van-button>
          </template>
        </van-card>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        {
          id: 0,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: "25.00",
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 1,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 2,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 3,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 4,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 5,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 6,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 7,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 8,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 9,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: 10,
          title: "马丁靴",
          desc: "商家大处理",
          num: 3,
          price: 25.00,
          thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
        },
      ],
    };
  },
  methods: {
      goToDetail(id){
          this.$router.push({name:'GoodDetail',params:{id:id}})
      }
  },
};
</script>
<style lang='scss' scoped>
*{
    margin: 0;
    padding: 0;
}
.goods{
    ul{
        list-style: none;
        margin-bottom: 50px;
        li{
            .divider{
                height: 20px;
                background-color: #eee;
            }
            .van-card{
                padding: 5px 20px;
                background-color: #fff;
                .van-tag{
                    padding: 2px 5px;
                    margin-top: 5px;
                }
                .tag-r{
                    margin-left: 10px;
                }
                .van-card__price{
                    color: red;
                }
                .van-card__origin-price{
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>